// Mark App JavaScript文件 - 通过请求拦截加载
console.log('Mark App JavaScript已通过请求拦截成功加载！');

// 全局应用对象
window.MarkApp = {
    version: '1.0.0',
    loadMethod: '请求拦截',
    
    init: function() {
        console.log('Mark App初始化完成 - 使用请求拦截技术');
        this.showLoadStatus();
    },
    
    getCurrentTime: function() {
        return new Date().toLocaleString('zh-CN');
    },
    
    showAlert: function(message) {
        alert('Mark App: ' + message);
    },

    showLoadStatus: function() {
        setTimeout(() => {
            const output = document.getElementById('output');
            if (output) {
                output.innerHTML = `
                    <div style="margin-top: 20px; padding: 15px; background: rgba(76, 175, 80, 0.2); border-radius: 8px; border: 1px solid #4CAF50;">
                        <p style="color: #4CAF50; margin: 0; font-weight: bold;">
                            🎯 请求拦截系统工作正常！
                        </p>
                        <small style="color: #666;">
                            CSS和JavaScript文件已通过自定义处理器成功加载
                        </small>
                    </div>
                `;
            }
        }, 500);
    }
};

// 测试JavaScript功能
function testJavaScript() {
    const output = document.getElementById('output');
    const now = new Date();
    
    output.innerHTML = `
        <div style="margin-top: 20px; padding: 15px; background: rgba(33, 150, 243, 0.1); border-radius: 8px; border: 1px solid #2196F3;">
            <h4 style="color: #2196F3; margin-top: 0;">JavaScript测试结果</h4>
            <p><strong>加载方式:</strong> ${window.MarkApp.loadMethod}</p>
            <p><strong>当前时间:</strong> ${now.toLocaleString('zh-CN')}</p>
            <p><strong>版本信息:</strong> ${window.MarkApp.version}</p>
            <p><strong>用户代理:</strong> ${navigator.userAgent.substr(0, 50)}...</p>
            <div style="margin-top: 10px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 4px;">
                <small>✅ JavaScript执行正常<br>✅ DOM操作正常<br>✅ 事件处理正常</small>
            </div>
        </div>
    `;
}

// 动态加载CSS（演示请求拦截）
function loadExternalCSS() {
    const output = document.getElementById('output');
    
    // 创建一个新的link元素来测试CSS加载
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'dynamic-styles.css'; // 这个文件不存在，用来测试404处理
    
    link.onload = function() {
        output.innerHTML = `
            <div style="margin-top: 20px; padding: 15px; background: rgba(76, 175, 80, 0.1); border-radius: 8px; border: 1px solid #4CAF50;">
                <p style="color: #4CAF50; margin: 0;">✅ 动态CSS加载成功！</p>
            </div>
        `;
    };
    
    link.onerror = function() {
        output.innerHTML = `
            <div style="margin-top: 20px; padding: 15px; background: rgba(255, 152, 0, 0.1); border-radius: 8px; border: 1px solid #FF9800;">
                <p style="color: #FF9800; margin: 0;">ℹ️ CSS文件不存在，但请求拦截系统正常工作</p>
                <small style="color: #666;">这演示了404错误处理机制</small>
            </div>
        `;
    };
    
    document.head.appendChild(link);
}

// 页面加载完成事件
window.addEventListener('load', function() {
    console.log('页面加载完成 - 所有资源都通过请求拦截加载');
    window.MarkApp.init();
});

// DOM内容加载完成事件
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM内容加载完成');
}); 